$(function () {
  //鼠标在预览区小图上移动的时候，显示放大区，移出，则隐藏放大区
  $("#normalView").mouseover(function (event) {
    $("#enlargeView").show();
    $(".mask").show();
  });
  $("img").mousemove(function (event) {
    var img = document.getElementsByTagName("img")[0];
    var enlargeView = document.getElementById("enlargeView");
    var $mask = $(".mask");
    // var mask = $mask.get(0);
    var mask = $mask[0];

    let x = event.pageX - mask.offsetWidth * 3.5;
    let y = event.pageY - mask.offsetHeight * 1.5;
    mask.style.left = x + "px";
    mask.style.top = y + "px";
    if (mask.style.top < 0) {
      mask.style.top = 0;
    }
    if (mask.style.left < 0) mask.style.left = 0;
    if (mask.offsetWidth + mask.offsetLeft > img.offsetWidth) {
      mask.style.left = img.offsetWidth - mask.offsetWidth;
    }
    if (mask.offsetHeight + mask.offsetTop > img.offsetHeight) {
      mask.style.top = img.offsetHeight - mask.offsetHeight;
    }

    enlargeView.style.backgroundPositionX =
      -mask.offsetLeft * (800 / 350) + "px";
    enlargeView.style.backgroundPositionY =
      -mask.offsetTop * (800 / 350) + "px";
  });
  $("#normalView").mouseout(function (event) {
    $("#enlargeView").hide();
    $(".mask").hide();
  });
});
